<script lang="ts">
  import Title from "../../../components/Title/Title.svelte";
  import { devicesDetail } from "../stores";
  import NumericalControlMachine from "./NumericalControlMachine.svelte";
  import RoboticArm from "./RoboticArm.svelte";

  $: {
    console.log(111, $devicesDetail);
  }
</script>

<div class="h-full flex flex-col">
  <Title title="设备详情模块" />
  <div class="flex-1 flex w-full">
    <div class="basis-2/5">
      <div
        class="h-full w-full bg-center bg-no-repeat bg-contain"
        class:machine-arm={$devicesDetail.type === "机械臂"}
        class:machine-tool={$devicesDetail.type === "数控机床"}
      />
    </div>
    {#if $devicesDetail.type === "机械臂"}
      <RoboticArm devicesDetail={$devicesDetail} />
    {:else if $devicesDetail.type === "数控机床"}
      <NumericalControlMachine devicesDetail={$devicesDetail} />
    {/if}
  </div>
</div>

<style>
  .machine-img {
    background-image: url("./machine.png");
  }
  .machine-arm {
    background-image: url("./arm.png");
  }
  .machine-tool {
    background-image: url("./tool.png");
  }
</style>
